<template>
	<view class="fx-center-between topic-item-view" @click="toTopicDetail(item.id)">
		<view class="fx-center">
			<view class="topic-name">
				<text class="num" :class="index===0 ? 'bgColor1' : index===1 ? 'bgColor2' : index===2 ? 'bgColor3' : ''"
					v-if="showRank">{{index+1}}</text>
				#{{item.name}}
			</view>
			<van-tag color="rgba(24, 102, 254, 0.1)" text-color="#4078E5" size="mini" v-if="item.is_new">
				新
			</van-tag>
			<van-tag color="rgba(255, 92, 0, 0.1)" text-color="#FF5C00" size="mini" v-if="item.is_hot">
				热
			</van-tag>
		</view>
		<view class="topic-num">{{item.user_count}}人参与</view>
	</view>

</template>

<script>
	export default {
		name: "topic-item",
		props: {
			index: {
				typeof: Number,
				default: 0
			},
			showRank: {
				typeof: Boolean,
				default: false
			},
			item: {
				typeof: Object,
				default: {}
			},
			// 是否跳转详情
			canClick: {
				typeof: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 话题详情
			toTopicDetail(id) {
				if (this.canClick) {
					if (this.$store.state.islogin) {
						uni.navigateTo({
							url: '/pages/index/hotTopic/topicDetail/topicDetail?id=' + id
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.topic-item-view {

		.num {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			background: #BEBFC2;
			display: inline-block;
			border-radius: 50%;
		}

		.bgColor1 {
			background: #FF5C00;
		}

		.bgColor2 {
			background: #FF8800;
		}

		.bgColor3 {
			background: #FFB200;
		}

		.topic-name {
			color: #161616;
			font-size: 30rpx;
			margin-right: 14rpx;
			max-width: 410rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.topic-num {
			color: #8A8F99;
			font-size: 26rpx;
			flex-shrink: 0;
		}


	}
</style>